<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie ie9" lang="en" class="no-js"> <![endif]-->
<!--[if !(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->

<head>
	<title>General Elements | KingAdmin - Admin Dashboard</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="KingAdmin - Bootstrap Admin Dashboard Theme">
	<meta name="author" content="The Develovers">
	<!-- CSS -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/main.css" rel="stylesheet" type="text/css">
	<link href="assets/css/my-custom-styles.css" rel="stylesheet" type="text/css">
	<!--[if lte IE 9]>
		<link href="assets/css/main-ie.css" rel="stylesheet" type="text/css"/>
		<link href="assets/css/main-ie-part2.css" rel="stylesheet" type="text/css"/>
	<![endif]-->
	<!-- CSS for demo style switcher. you can remove this -->
	<link href="demo-style-switcher/assets/css/style-switcher.css" rel="stylesheet" type="text/css">
	<!-- Fav and touch icons -->
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/kingadmin-favicon144x144.png">
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/kingadmin-favicon114x114.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/kingadmin-favicon72x72.png">
	<link rel="apple-touch-icon-precomposed" sizes="57x57" href="assets/ico/kingadmin-favicon57x57.png">
	<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>

<body class="sidebar-fixed topnav-fixed general-ui-elements">
	<!-- WRAPPER -->
	<div id="wrapper" class="wrapper">
		<!-- TOP BAR -->
		<div class="top-bar navbar-fixed-top">
			<div class="container">
				<div class="clearfix">
					<a href="ui-elements-general.html#" class="pull-left toggle-sidebar-collapse"><i class="fa fa-bars"></i></a>
					<!-- logo -->
					<div class="pull-left left logo">
						<a href="index.html"><img src="assets/img/kingadmin-logo-white.png" alt="KingAdmin - Admin Dashboard" /></a>
						<h1 class="sr-only">KingAdmin Admin Dashboard</h1>
					</div>
					<!-- end logo -->
					<div class="pull-right right">
						<!-- search box -->
						<div class="searchbox">
							<div id="tour-searchbox" class="input-group">
								<input type="search" class="form-control" placeholder="enter keyword here...">
								<span class="input-group-btn">
									<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
								</span>
							</div>
						</div>
						<!-- end search box -->
						<!-- top-bar-right -->
						<div class="top-bar-right">
							<button type="button" id="start-tour" class="btn btn-link"><i class="fa fa-refresh"></i> Start Tour</button>
							<button type="button" id="global-volume" class="btn btn-link btn-global-volume"><i class="fa"></i></button>
							<div class="notifications">
								<ul>
									<!-- notification: inbox -->
									<li class="notification-item inbox">
										<div class="btn-group">
											<a href="ui-elements-general.html#" class="dropdown-toggle" data-toggle="dropdown">
												<i class="fa fa-envelope"></i><span class="count">2</span>
												<span class="circle"></span>
											</a>
											<ul class="dropdown-menu" role="menu">
												<li class="notification-header">
													<em>You have 2 unread messages</em>
												</li>
												<li class="inbox-item clearfix">
													<a href="ui-elements-general.html#">
														<div class="media">
															<div class="media-left">
																<img class="media-object" src="assets/img/user1.png" alt="Antonio">
															</div>
															<div class="media-body">
																<h5 class="media-heading name">Antonius</h5>
																<p class="text">The problem just happened this morning. I can't see ...</p>
																<span class="timestamp">4 minutes ago</span>
															</div>
														</div>
													</a>
												</li>
												<li class="inbox-item unread clearfix">
													<a href="ui-elements-general.html#">
														<div class="media">
															<div class="media-left">
																<img class="media-object" src="assets/img/user2.png" alt="Antonio">
															</div>
															<div class="media-body">
																<h5 class="media-heading name">Michael</h5>
																<p class="text">Hey dude, cool theme!</p>
																<span class="timestamp">2 hours ago</span>
															</div>
														</div>
													</a>
												</li>
												<li class="inbox-item unread clearfix">
													<a href="ui-elements-general.html#">
														<div class="media">
															<div class="media-left">
																<img class="media-object" src="assets/img/user3.png" alt="Antonio">
															</div>
															<div class="media-body">
																<h5 class="media-heading name">Stella</h5>
																<p class="text">Ok now I can see the status for each item. Thanks! :D</p>
																<span class="timestamp">Oct 6</span>
															</div>
														</div>
													</a>
												</li>
												<li class="inbox-item clearfix">
													<a href="ui-elements-general.html#">
														<div class="media">
															<div class="media-left">
																<img class="media-object" src="assets/img/user4.png" alt="Antonio">
															</div>
															<div class="media-body">
																<h5 class="media-heading name">Jane Doe</h5>
																<p class="text"><i class="fa fa-reply"></i> Please check the status of your ...</p>
																<span class="timestamp">Oct 2</span>
															</div>
														</div>
													</a>
												</li>
												<li class="inbox-item clearfix">
													<a href="ui-elements-general.html#">
														<div class="media">
															<div class="media-left">
																<img class="media-object" src="assets/img/user5.png" alt="Antonio">
															</div>
															<div class="media-body">
																<h5 class="media-heading name">John Simmons</h5>
																<p class="text"><i class="fa fa-reply"></i> I've fixed the problem :)</p>
																<span class="timestamp">Sep 12</span>
															</div>
														</div>
													</a>
												</li>
												<li class="notification-footer">
													<a href="ui-elements-general.html#">View All Messages</a>
												</li>
											</ul>
										</div>
									</li>
									<!-- end notification: inbox -->
									<!-- notification: general -->
									<li class="notification-item general">
										<div class="btn-group">
											<a href="ui-elements-general.html#" class="dropdown-toggle" data-toggle="dropdown">
												<i class="fa fa-bell"></i><span class="count">8</span>
												<span class="circle"></span>
											</a>
											<ul class="dropdown-menu" role="menu">
												<li class="notification-header">
													<em>You have 8 notifications</em>
												</li>
												<li>
													<a href="ui-elements-general.html#">
														<i class="fa fa-comment green-font"></i>
														<span class="text">New comment on the blog post</span>
														<span class="timestamp">1 minute ago</span>
													</a>
												</li>
												<li>
													<a href="ui-elements-general.html#">
														<i class="fa fa-user green-font"></i>
														<span class="text">New registered user</span>
														<span class="timestamp">12 minutes ago</span>
													</a>
												</li>
												<li>
													<a href="ui-elements-general.html#">
														<i class="fa fa-comment green-font"></i>
														<span class="text">New comment on the blog post</span>
														<span class="timestamp">18 minutes ago</span>
													</a>
												</li>
												<li>
													<a href="ui-elements-general.html#">
														<i class="fa fa-shopping-cart red-font"></i>
														<span class="text">4 new sales order</span>
														<span class="timestamp">4 hours ago</span>
													</a>
												</li>
												<li>
													<a href="ui-elements-general.html#">
														<i class="fa fa-edit yellow-font"></i>
														<span class="text">3 product reviews awaiting moderation</span>
														<span class="timestamp">1 day ago</span>
													</a>
												</li>
												<li>
													<a href="ui-elements-general.html#">
														<i class="fa fa-comment green-font"></i>
														<span class="text">New comment on the blog post</span>
														<span class="timestamp">3 days ago</span>
													</a>
												</li>
												<li>
													<a href="ui-elements-general.html#">
														<i class="fa fa-comment green-font"></i>
														<span class="text">New comment on the blog post</span>
														<span class="timestamp">Oct 15</span>
													</a>
												</li>
												<li>
													<a href="ui-elements-general.html#">
														<i class="fa fa-warning red-font"></i>
														<span class="text red-font">Low disk space!</span>
														<span class="timestamp">Oct 11</span>
													</a>
												</li>
												<li class="notification-footer">
													<a href="ui-elements-general.html#">View All Notifications</a>
												</li>
											</ul>
										</div>
									</li>
									<!-- end notification: general -->
								</ul>
							</div>
							<!-- logged user and the menu -->
							<div class="logged-user">
								<div class="btn-group">
									<a href="ui-elements-general.html#" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
										<img src="assets/img/user-avatar.png" alt="User Avatar" />
										<span class="name">Stacy Rose</span> <span class="caret"></span>
									</a>
									<ul class="dropdown-menu" role="menu">
										<li>
											<a href="ui-elements-general.html#">
												<i class="fa fa-user"></i>
												<span class="text">Profile</span>
											</a>
										</li>
										<li>
											<a href="ui-elements-general.html#">
												<i class="fa fa-cog"></i>
												<span class="text">Settings</span>
											</a>
										</li>
										<li>
											<a href="ui-elements-general.html#">
												<i class="fa fa-power-off"></i>
												<span class="text">Logout</span>
											</a>
										</li>
									</ul>
								</div>
							</div>
							<!-- end logged user and the menu -->
						</div>
						<!-- end top-bar-right -->
					</div>
				</div>
			</div>
			<!-- /container -->
		</div>
		<!-- END TOP BAR -->
		<!-- LEFT SIDEBAR -->
		<div id="left-sidebar" class="left-sidebar ">
			<!-- main-nav -->
			<div class="sidebar-scroll">
				<nav class="main-nav">
					<ul class="main-menu">
						<li><a href="ui-elements-general.html#" class="js-sub-menu-toggle"><i class="fa fa-dashboard fa-fw"></i><span class="text">Dashboard</span>
							<i class="toggle-icon fa fa-angle-left"></i></a>
							<ul class="sub-menu ">
								<li><a href="index.html"><span class="text">Dashboard v1</span></a></li>
								<li><a href="index-transparent.html"><span class="text">Dashboard v1 Transp.</span></a></li>
								<li><a href="index-dashboard-v2.html"><span class="text">Dashboard v2</span></a></li>
								<li><a href="index-dashboard-v2-transparent.html"><span class="text">Dashboard v2 Trans.</span></a></li>
								<li><a href="index-dashboard-v3.html"><span class="text">Dashboard v3</span></a></li>
								<li><a href="index-dashboard-v4.html"><span class="text">Dashboard v4 <span class="badge element-bg-color-blue">New</span></span></a></li>
							</ul>
						</li>
						<li><a href="ui-elements-general.html#" class="js-sub-menu-toggle"><i class="fa fa-navicon"></i><span class="text">Navigations <span class="badge element-bg-color-blue">New</span></span>
							<i class="toggle-icon fa fa-angle-left"></i></a>
							<ul class="sub-menu ">
								<li><a href="nav-default-fixed.html"><span class="text">Default Fixed Sidebar</span></a></li>
								<li><a href="nav-normal.html"><span class="text">Normal Sidebar</span></a></li>
							</ul>
						</li>
						<li><a href="ui-elements-general.html#" class="js-sub-menu-toggle"><i class="fa fa-columns"></i><span class="text">Layouts <span class="badge element-bg-color-blue">New</span></span>
							<i class="toggle-icon fa fa-angle-left"></i></a>
							<ul class="sub-menu ">
								<li><a href="layout-collapsed.html"><span class="text">Collapsed Sidebar</span></a></li>
								<li><a href="layout-minified.html"><span class="text">Minified Sidebar</span></a></li>
								<li><a href="layout-ontop-navigation.html"><span class="text">On-Top Navigation</span></a></li>
							</ul>
						</li>
						<li><a href="ui-elements-general.html#" class="js-sub-menu-toggle"><i class="fa fa-clipboard fa-fw"></i><span class="text">Pages</span>
							<i class="toggle-icon fa fa-angle-left"></i></a>
							<ul class="sub-menu ">
								<li><a href="page-profile.html"><span class="text">Profile</span></a></li>
								<li><a href="page-invoice.html"><span class="text">Invoice</span></a></li>
								<li><a href="page-knowledgebase.html"><span class="text">Knowledge Base</span></a></li>
								<li><a href="page-new-message.html"><span class="text">New Message</span></a></li>
								<li><a href="page-view-message.html"><span class="text">View Message</span></a></li>
								<li><a href="page-search-result.html"><span class="text">Search Result</span></a></li>
								<li><a href="page-submit-ticket.html"><span class="text">Submit Ticket</span></a></li>
								<li><a href="page-faq.html"><span class="text">FAQ</span></a></li>
								<li><a href="page-register.html"><span class="text">Register</span></a></li>
								<li><a href="page-register-transparent.html"><span class="text">Register Transparent</span></a></li>
								<li><a href="page-login.html"><span class="text">Login</span></a></li>
								<li><a href="page-login-transparent.html"><span class="text">Login Transparent</span></a></li>
								<li><a href="page-404.html"><span class="text">404</span></a></li>
								<li><a href="page-404-transparent.html"><span class="text">404 Transparent</span></a></li>
								<li><a href="page-blank.html"><span class="text">Blank Page</span></a></li>
							</ul>
						</li>
						<li><a href="page-inbox.html"><i class="fa fa-envelope-o"></i><span class="text">Inbox <span class="badge red-bg">32</span></span></a></li>
						<li><a href="ui-elements-general.html#" class="js-sub-menu-toggle"><i class="fa fa-file"></i><span class="text">File Manager</span>
							<i class="toggle-icon fa fa-angle-left"></i></a>
							<ul class="sub-menu ">
								<li><a href="page-file-manager.html"><span class="text">Default</span></a></li>
								<li><a href="page-file-manager-transparent.html"><span class="text">Transparent</span></a></li>
							</ul>
						</li>
						<li><a href="page-projects.html"><i class="fa fa-briefcase"></i><span class="text">Projects</span></a></li>
						<li><a href="page-project-detail.html"><i class="fa fa-tasks"></i><span class="text">Project Detail</span></a></li>
						<li><a href="ui-elements-general.html#" class="js-sub-menu-toggle"><i class="fa fa-bar-chart-o fw"></i><span class="text">Charts &amp; Statistics</span>
							<i class="toggle-icon fa fa-angle-left"></i></a>
							<ul class="sub-menu ">
								<li><a href="charts-statistics.html"><span class="text">Charts</span></a></li>
								<li><a href="charts-statistics-transparent.html"><span class="text">Charts Transparent</span></a></li>
								<li><a href="charts-statistics-interactive.html"><span class="text">Interactive Charts</span></a></li>
								<li><a href="charts-statistics-interactive-transparent.html"><span class="text">Interactive Charts Transparent</span></a></li>
								<li><a href="charts-statistics-real-time.html"><span class="text">Realtime Charts</span></a></li>
								<li><a href="charts-statistics-real-time-transparent.html"><span class="text">Realtime Charts Transparent</span></a></li>
								<li><a href="charts-d3charts.html"><span class="text">D3 Charts</span></a></li>
							</ul>
						</li>
						<li><a href="ui-elements-general.html#" class="js-sub-menu-toggle"><i class="fa fa-edit fw"></i><span class="text">Forms</span>
							<i class="toggle-icon fa fa-angle-left"></i></a>
							<ul class="sub-menu ">
								<li><a href="form-inplace-editing.html"><span class="text">In-place Editing</span></a></li>
								<li><a href="form-elements.html"><span class="text">Form Elements</span></a></li>
								<li><a href="form-layouts.html"><span class="text">Form Layouts</span></a></li>
								<li><a href="form-bootstrap-elements.html"><span class="text">Bootstrap Elements</span></a></li>
								<li><a href="form-validations.html"><span class="text">Validation</span></a></li>
								<li><a href="form-file-upload.html"><span class="text">File Upload</span></a></li>
								<li><a href="form-text-editor.html"><span class="text">Text Editor</span></a></li>
							</ul>
						</li>
						<li class="active"><a href="ui-elements-general.html#" class="js-sub-menu-toggle"><i class="fa fa-list-alt fw"></i><span class="text">UI Elements</span>
							<i class="toggle-icon fa fa-angle-down"></i></a>
							<ul class="sub-menu open">
								<li class="active"><a href="ui-elements-general.html"><span class="text">General Elements</span></a></li>
								<li><a href="ui-elements-tabs.html"><span class="text">Tabs</span></a></li>
								<li><a href="ui-elements-buttons.html"><span class="text">Buttons</span></a></li>
								<li><a href="ui-elements-icons.html"><span class="text">Icons <span class="badge element-bg-color-blue">Updated</span></span></a></li>
								<li><a href="ui-elements-flash-message.html"><span class="text">Flash Message</span></a></li>
							</ul>
						</li>
						<li><a href="widgets.html"><i class="fa fa-puzzle-piece fa-fw"></i><span class="text">Widgets</span></a></li>
						<li><a href="ui-elements-general.html#" class="js-sub-menu-toggle"><i class="fa fa-gears fw"></i><span class="text">Components</span>
							<i class="toggle-icon fa fa-angle-left"></i></a>
							<ul class="sub-menu ">
								<li><a href="components-wizard.html"><span class="text">Wizard (with validation)</span></a></li>
								<li><a href="components-calendar.html"><span class="text">Calendar</span></a></li>
								<li><a href="components-maps.html"><span class="text">Maps</span></a></li>
								<li><a href="components-maps-transparent.html"><span class="text">Maps Transparent</span></a></li>
								<li><a href="components-gallery.html"><span class="text">Gallery</span></a></li>
								<li><a href="components-tree-view.html"><span class="text">Tree View </span></a></li>
								<li><a href="components-tree-view-transparent.html"><span class="text">Tree View Transparent</span></a></li>
							</ul>
						</li>
						<li><a href="ui-elements-general.html#" class="js-sub-menu-toggle"><i class="fa fa-table fw"></i><span class="text">Tables</span>
							<i class="toggle-icon fa fa-angle-left"></i></a>
							<ul class="sub-menu ">
								<li><a href="tables-static-table.html"><span class="text">Static Table</span></a></li>
								<li><a href="tables-dynamic-table.html"><span class="text">Dynamic Table</span></a></li>
							</ul>
						</li>
						<li><a href="typography.html"><i class="fa fa-font fa-fw"></i><span class="text">Typography</span></a></li>
						<li>
							<a href="ui-elements-general.html#" class="js-sub-menu-toggle"><i class="fa fa-bars"></i>
								<span class="text">Menu Lvl 1</span>
								<i class="toggle-icon fa fa-angle-left"></i>
							</a>
							<ul class="sub-menu">
								<li class="">
									<a href="ui-elements-general.html#" class="js-sub-menu-toggle">
										<span class="text">Menu Lvl 2</span>
										<i class="toggle-icon fa fa-angle-left"></i>
									</a>
									<ul class="sub-menu">
										<li><a href="ui-elements-general.html#">Menu Lvl 3</a></li>
										<li><a href="ui-elements-general.html#">Menu Lvl 3</a></li>
										<li><a href="ui-elements-general.html#">Menu Lvl 3</a></li>
									</ul>
								</li>
								<li>
									<a href="ui-elements-general.html#">
										<span class="text">Menu Lvl 2</span>
									</a>
								</li>
							</ul>
						</li>
					</ul>
				</nav>
				<!-- /main-nav -->
			</div>
		</div>
		<!-- END LEFT SIDEBAR -->
		<!-- MAIN CONTENT WRAPPER -->
		<div id="main-content-wrapper" class="content-wrapper ">
			<!-- top general alert -->
			<div class="alert alert-danger top-general-alert">
				<span>If you <strong>can't see the logo</strong> on the top left, please reset the style on right style switcher (for upgraded theme only).</span>
				<button type="button" class="close">&times;</button>
			</div>
			<!-- end top general alert -->
			<div class="row">
				<div class="col-lg-4 ">
					<ul class="breadcrumb">
						<li><i class="fa fa-home"></i><a href="ui-elements-general.html#">Home</a></li>
						<li><a href="ui-elements-general.html#">UI Elements</a></li>
						<li class="active">General Elements</li>
					</ul>
				</div>
				<div class="col-lg-8 ">
					<div class="top-content">
						<ul class="list-inline quick-access">
							<li>
								<a href="charts-statistics-interactive.html">
									<div class="quick-access-item bg-color-green">
										<i class="fa fa-bar-chart-o"></i>
										<h5>CHARTS</h5><em>basic, interactive, real-time</em>
									</div>
								</a>
							</li>
							<li>
								<a href="page-inbox.html">
									<div class="quick-access-item bg-color-blue">
										<i class="fa fa-envelope"></i>
										<h5>INBOX</h5><em>inbox with gmail style</em>
									</div>
								</a>
							</li>
							<li>
								<a href="tables-dynamic-table.html">
									<div class="quick-access-item bg-color-orange">
										<i class="fa fa-table"></i>
										<h5>DYNAMIC TABLE</h5><em>tons of features and interactivity</em>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- main -->
			<div class="content">
				<div class="main-header">
					<h2>General Elements</h2>
					<em>General UI Elements</em>
				</div>
				<div class="main-content">
					<div class="row">
						<div class="col-lg-6">
							<!-- PROGRESS BARS -->
							<div id="widget-progress-bar" class="widget">
								<div class="widget-header">
									<h3>Progress Bars</h3>
								</div>
								<div class="widget-content">
									<h5>Various Styles</h5>
									<div class="progress demo-only">
										<div class="progress-bar" data-transitiongoal="20"></div>
									</div>
									<div class="progress demo-only progress-striped">
										<div class="progress-bar progress-bar-warning" data-transitiongoal="40"></div>
									</div>
									<div class="progress demo-only progress-striped active">
										<div class="progress-bar progress-bar-info" data-transitiongoal="60"></div>
									</div>
									<div class="progress demo-only">
										<div class="progress-bar progress-bar-success" data-transitiongoal="20"></div>
										<div class="progress-bar progress-bar-warning" data-transitiongoal="35"></div>
										<div class="progress-bar progress-bar-danger" data-transitiongoal="10"></div>
									</div>
									<h5>Format</h5>
									<div class="progress no-percentage">
										<div class="progress-bar" data-transitiongoal="35"></div>
									</div>
									<div class="progress custom-format">
										<div class="progress-bar" data-transitiongoal="65"></div>
									</div>
									<h5>Other Sizes</h5>
									<div class="progress demo-only progress-sm">
										<div class="progress-bar progress-bar-success" data-transitiongoal="80"></div>
									</div>
									<div class="progress demo-only progress-xs">
										<div class="progress-bar progress-bar-danger" data-transitiongoal="90"></div>
									</div>
									<h5>No Animation (Bootstrap Original)</h5>
									<div class="progress">
										<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
											<span class="sr-only">60% Complete</span>
										</div>
									</div>
									<h5>Vertical</h5>
									<div class="progress-vertical-wrapper">
										<div class="progress vertical">
											<div class="progress-bar" data-transitiongoal="80"></div>
										</div>
										<div class="progress vertical bottom">
											<div class="progress-bar progress-bar-warning" data-transitiongoal="60"></div>
										</div>
										<div class="progress demo-only progress-striped vertical wide">
											<div class="progress-bar progress-bar-info" data-transitiongoal="50"></div>
										</div>
										<div class="progress demo-only progress-striped active vertical bottom wide">
											<div class="progress-bar progress-bar-danger" data-transitiongoal="70"></div>
										</div>
									</div>
								</div>
							</div>
							<!-- END PROGRESS BARS -->
							<!-- TOOLTIPS -->
							<div class="widget">
								<div class="widget-header">
									<h3>Tooltips</h3>
								</div>
								<div class="widget-content">
									<div class="demo-tooltip">
										<button type="button" class="btn btn-primary btn-sm" data-toggle="tooltip" data-placement="left" data-original-title="Tooltip on left">Tooltip on left</button>
										<button type="button" class="btn btn-primary btn-sm" data-toggle="tooltip" data-placement="top" data-original-title="Tooltip on top">Tooltip on top</button>
										<button type="button" class="btn btn-primary btn-sm" data-toggle="tooltip" data-placement="bottom" data-original-title="Tooltip on bottom">Tooltip on bottom</button>
										<button type="button" class="btn btn-primary btn-sm" data-toggle="tooltip" data-placement="right" data-original-title="Tooltip on right">Tooltip on right</button>
									</div>
									<br />
									<div class="demo-popover1">
										<button type="button" id="popover-title" class="btn btn-block btn-warning" data-container="body" data-toggle="popover" data-placement="top">Popover With Title</button>
										<button type="button" id="popover-hover" class="btn btn-block btn-warning" data-container="body" data-toggle="popover" data-placement="top">Popover On Hover</button>
									</div>
									<br />
									<div class="demo-popover2">
										<button type="button" class="btn btn-default btn-sm" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>
										<button type="button" class="btn btn-default btn-sm" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>
										<button type="button" class="btn btn-default btn-sm" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on bottom</button>
										<button type="button" class="btn btn-default btn-sm" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</button>
									</div>
								</div>
							</div>
							<!-- END TOOLTIPS -->
							<!-- MODAL DIALOG -->
							<div class="widget">
								<div class="widget-header">
									<h3>Modal Dialog</h3>
								</div>
								<div class="widget-content">
									<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
									<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
													<h4 class="modal-title" id="myModalLabel">Modal title</h4>
												</div>
												<div class="modal-body">
													<p>Modal dialog content...</p>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times-circle"></i> Close</button>
													<button type="button" class="btn btn-custom-primary"><i class="fa fa-check-circle"></i> Save changes</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- END MODAL DIALOG -->
						</div>
						<div class="col-lg-6">
							<!-- LABELS AND BADGES -->
							<div class="widget">
								<div class="widget-header">
									<h3>Labels &amp; Badges</h3>
								</div>
								<div class="widget-content">
									<h5>Labels</h5>
									<div class="label label-default">Default</div>
									<div class="label label-primary">Primary</div>
									<div class="label label-info">Info</div>
									<div class="label label-success">Success</div>
									<div class="label label-warning">Warning</div>
									<div class="label label-danger">Danger</div>
									<h5>Badges</h5>
									<span class="badge">24</span>
									<span class="badge element-bg-color-green">12</span>
									<span class="badge element-bg-color-orange">8</span>
									<span class="badge element-bg-color-seagreen">30</span>
									<span class="badge element-bg-color-blue">2</span>
								</div>
							</div>
							<!-- END LABELS AND BADGES -->
							<!-- PAGINATION -->
							<div class="widget">
								<div class="widget-header">
									<h3>Pagination</h3>
								</div>
								<div class="widget-content">
									<ul class="pagination">
										<li class="disabled"><a href="ui-elements-general.html#">&laquo;</a></li>
										<li class="active"><a href="ui-elements-general.html#">1</a></li>
										<li><a href="ui-elements-general.html#">2</a></li>
										<li><a href="ui-elements-general.html#">3</a></li>
										<li><a href="ui-elements-general.html#">4</a></li>
										<li><a href="ui-elements-general.html#">5</a></li>
										<li><a href="ui-elements-general.html#">&raquo;</a></li>
									</ul>
									<br/>
									<ul class="pagination borderless">
										<li><a href="ui-elements-general.html#">&laquo;</a></li>
										<li><a href="ui-elements-general.html#">1</a></li>
										<li><a href="ui-elements-general.html#">2</a></li>
										<li class="active"><a href="ui-elements-general.html#">3</a></li>
										<li><a href="ui-elements-general.html#">4</a></li>
										<li><a href="ui-elements-general.html#">5</a></li>
										<li><a href="ui-elements-general.html#">&raquo;</a></li>
									</ul>
									<br/>
									<ul class="pagination">
										<li class="disabled"><a href="ui-elements-general.html#"><i class="fa fa-chevron-left"></i></a></li>
										<li class="active"><a href="ui-elements-general.html#">1</a></li>
										<li><a href="ui-elements-general.html#">2</a></li>
										<li><a href="ui-elements-general.html#">3</a></li>
										<li><a href="ui-elements-general.html#">4</a></li>
										<li><a href="ui-elements-general.html#">5</a></li>
										<li><a href="ui-elements-general.html#"><i class="fa fa-chevron-right"></i></a></li>
									</ul>
									<br/>
									<ul class="pagination borderless">
										<li><a href="ui-elements-general.html#"><i class="i fa fa-angle-left"></i></a></li>
										<li><a href="ui-elements-general.html#">1</a></li>
										<li><a href="ui-elements-general.html#">2</a></li>
										<li class="active"><a href="ui-elements-general.html#">3</a></li>
										<li><a href="ui-elements-general.html#">4</a></li>
										<li><a href="ui-elements-general.html#">5</a></li>
										<li><a href="ui-elements-general.html#"><i class="i fa fa-angle-right"></i></a></li>
									</ul>
									<ul class="pager">
										<li><a href="ui-elements-general.html#">&larr; Previous</a></li>
										<li><a href="ui-elements-general.html#">Next &rarr;</a></li>
									</ul>
								</div>
							</div>
							<!-- END PAGINATION -->
							<!-- ALERTS -->
							<div class="widget">
								<div class="widget-header">
									<h3>Alerts</h3>
								</div>
								<div class="widget-content">
									<div class="alert alert-success">
										<strong>Well done!</strong> You successfully read this important alert message.
									</div>
									<div class="alert alert-info alert-dismissable">
										<a href="ui-elements-general.html" class="close">&times;</a>
										<strong>Heads up!</strong> This alert needs your attention, but it's not super important. You can close this alert message.
									</div>
									<div class="alert alert-warning alert-dismissable">
										<a href="ui-elements-general.html" class="close">&times;</a>
										<strong>Warning!</strong> Best check yo self, you're not looking too good.
									</div>
									<div class="alert alert-danger alert-dismissable">
										<a href="ui-elements-general.html" class="close">&times;</a>
										<strong>Oh snap!</strong> Change a few things up and try submitting again.
									</div>
								</div>
							</div>
							<!-- END ALERTS -->
						</div>
					</div>
					<!-- ACCORDION -->
					<div class="widget">
						<div class="widget-header">
							<h3>Accordion</h3>
						</div>
						<div class="widget-content">
							<div class="row">
								<div class="col-md-6">
									<div class="panel-group" id="accordion">
										<div class="panel panel-default">
											<div class="panel-heading">
												<h4 class="panel-title">
									<a data-toggle="collapse" data-parent="#accordion" href="ui-elements-general.html#collapseOne">Collapsible Group Item #1 <i class="fa fa-angle-down pull-right"></i><i class="fa fa-angle-up pull-right"></i></a>
								</h4>
											</div>
											<div id="collapseOne" class="panel-collapse collapse in">
												<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
											</div>
										</div>
										<div class="panel panel-default">
											<div class="panel-heading">
												<h4 class="panel-title">
									<a data-toggle="collapse" data-parent="#accordion" href="ui-elements-general.html#collapseTwo" class="collapsed">Collapsible Group Item #2 <i class="fa fa-angle-down pull-right"></i><i class="fa fa-angle-up pull-right"></i></a>
								</h4>
											</div>
											<div id="collapseTwo" class="panel-collapse collapse">
												<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
											</div>
										</div>
										<div class="panel panel-default">
											<div class="panel-heading">
												<h4 class="panel-title">
									<a data-toggle="collapse" data-parent="#accordion" href="ui-elements-general.html#collapseThree" class="collapsed">Collapsible Group Item #3 <i class="fa fa-angle-down pull-right"></i><i class="fa fa-angle-up pull-right"></i></a>
								</h4>
											</div>
											<div id="collapseThree" class="panel-collapse collapse">
												<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="panel-group" id="accordion2">
										<div class="panel panel-default">
											<div class="panel-heading">
												<h4 class="panel-title">
									<a data-toggle="collapse" data-parent="#accordion2" href="ui-elements-general.html#collapseOne2"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i> Collapsible Group Item #1</a>
								</h4>
											</div>
											<div id="collapseOne2" class="panel-collapse collapse in">
												<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div>
											</div>
										</div>
										<div class="panel panel-default">
											<div class="panel-heading">
												<h4 class="panel-title">
									<a data-toggle="collapse" data-parent="#accordion2" href="ui-elements-general.html#collapseTwo2" class="collapsed"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i> Collapsible Group Item #2</a>
								</h4>
											</div>
											<div id="collapseTwo2" class="panel-collapse collapse">
												<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
											</div>
										</div>
										<div class="panel panel-default">
											<div class="panel-heading">
												<h4 class="panel-title">
									<a data-toggle="collapse" data-parent="#accordion2" href="ui-elements-general.html#collapseThree2" class="collapsed"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i> Collapsible Group Item #3</a>
								</h4>
											</div>
											<div id="collapseThree2" class="panel-collapse collapse">
												<div class="panel-body">Non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- END ACCORDION -->
				</div>
			</div>
			<!-- /main -->
			<!-- FOOTER -->
			<footer class="footer">
				&copy; 2016 The Develovers
			</footer>
			<!-- END FOOTER -->
		</div>
		<!-- END CONTENT WRAPPER -->
	</div>
	<!-- END WRAPPER -->
	<!-- STYLE SWITCHER -->
	<div class="del-style-switcher">
		<div class="del-switcher-toggle toggle-hide"></div>
		<form>
			<section class="del-section del-section-skin">
				<h5 class="del-switcher-header">Choose Skins:</h5>
				<ul>
					<li><a href="ui-elements-general.html#" title="Slate Gray" class="switch-skin slategray" data-skin="assets/css/skins/slategray.css">Slate Gray</a></li>
					<li><a href="ui-elements-general.html#" title="Dark Blue" class="switch-skin darkblue" data-skin="assets/css/skins/darkblue.css">Dark Blue</a></li>
					<li><a href="ui-elements-general.html#" title="Dark Brown" class="switch-skin darkbrown" data-skin="assets/css/skins/darkbrown.css">Dark Brown</a></li>
					<li><a href="ui-elements-general.html#" title="Light Green" class="switch-skin lightgreen" data-skin="assets/css/skins/lightgreen.css">Light Green</a></li>
					<li><a href="ui-elements-general.html#" title="Orange" class="switch-skin orange" data-skin="assets/css/skins/orange.css">Orange</a></li>
					<li><a href="ui-elements-general.html#" title="Red" class="switch-skin red" data-skin="assets/css/skins/red.css">Red</a></li>
					<li><a href="ui-elements-general.html#" title="Teal" class="switch-skin teal" data-skin="assets/css/skins/teal.css">Teal</a></li>
					<li><a href="ui-elements-general.html#" title="Yellow" class="switch-skin yellow" data-skin="assets/css/skins/yellow.css">Yellow</a></li>
				</ul>
				<div id="transparent-control"></div>
				<button type="button" class="switch-skin-full fulldark" data-skin="assets/css/skins/fulldark.css">Full Dark</button>
				<button type="button" class="switch-skin-full fullbright" data-skin="assets/css/skins/fullbright.css">Full Bright</button>
			</section>
			<p><a href="ui-elements-general.html#" title="Reset Style" class="del-reset-style">Reset Style</a></p>
		</form>
		<script type="text/javascript">
		var currentFilename = window.location.pathname.split('/').pop();
		if (currentFilename == '') currentFilename = 'index.html';

		var arrHasTransparent = ['index.html', 'index-dashboard-v2.html', 'charts-statistics-interactive.html', 'charts-statistics-real-time.html',
			'charts-statistics.html', 'components-maps.html', 'components-tree-view.html', 'page-file-manager.html'
		];

		var hasTransparent = false;

		arrHasTransparent.forEach(function(filename) {
			if (filename == currentFilename) {
				hasTransparent = true;
				return;
			}
		});

		if (hasTransparent) {
			document.getElementById("transparent-control").innerHTML = '<p><em>There is specific transparent version for this page, check <span class="important">&larr; left</span> navigation menu</em></p><br>';
		} else {
			document.getElementById("transparent-control").innerHTML = '<button type="button" class="switch-skin-full transparent" data-skin="assets/css/skins/transparent.css">Transparent</button>';
		}
		</script>
	</div>
	<!-- END STYLE SWITCHER -->
	<!-- Javascript -->
	<script src="assets/js/jquery/jquery-2.1.0.min.js"></script>
	<script src="assets/js/bootstrap/bootstrap.js"></script>
	<script src="assets/js/plugins/modernizr/modernizr.js"></script>
	<script src="assets/js/plugins/bootstrap-tour/bootstrap-tour.custom.js"></script>
	<script src="assets/js/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	<script src="assets/js/king-common.js"></script>
	<script src="demo-style-switcher/assets/js/deliswitch.js"></script>
	<script src="assets/js/plugins/bootstrap-multiselect/bootstrap-multiselect.js"></script>
	<script src="assets/js/plugins/bootstrap-progressbar/bootstrap-progressbar.js"></script>
	<script src="assets/js/king-elements.js"></script>
</body>

</html>
